<template>
  <div class="active-record">
    <div class="active-record__title">
      <span>活动公告</span>
      <span>
        <el-icon class="icon" size="20">
          <CirclePlus />
        </el-icon>
        开展新活动</span
      >
    </div>
    <div class="active-record__content">
      <div class="active-record__content--item">
        <div class="gruop">
          <div class="active-record__content--item--title">
            <span>周年庆优惠活动</span>
          </div>
          <div class="active-record__content--item--time">
            <span>2021-09-08 15:34</span>
            <span>至</span>
            <span>2021-09-10 00:00</span>
          </div>
        </div>

        <div class="active-record__content--item--desc">
          <span
            >今天专场活动，部分套餐打7折，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，前台电话：123889889</span
          >
        </div>
        <div class="active-record__content--item--btn">
          <span>查看详情</span>
          <!-- <img src="../../../assets/images/icon-arrow.png" alt="" /> -->
        </div>
      </div>
      <div class="active-record__content--item">
        <div class="gruop">
          <div class="active-record__content--item--title">
            <span>周年庆优惠活动</span>
          </div>
          <div class="active-record__content--item--time">
            <span>2021-09-08 15:34</span>
            <span>至</span>
            <span>2021-09-10 00:00</span>
          </div>
        </div>

        <div class="active-record__content--item--desc">
          <span
            >今天专场活动，部分套餐打7折，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，前台电话：123889889</span
          >
        </div>
        <div class="active-record__content--item--btn">
          <span>查看详情</span>
          <!-- <img src="../../../assets/images/icon-arrow.png" alt="" /> -->
        </div>
      </div>
      <div class="active-record__content--item">
        <div class="gruop">
          <div class="active-record__content--item--title">
            <span>周年庆优惠活动</span>
          </div>
          <div class="active-record__content--item--time">
            <span>2021-09-08 15:34</span>
            <span>至</span>
            <span>2021-09-10 00:00</span>
          </div>
        </div>

        <div class="active-record__content--item--desc">
          <span
            >今天专场活动，部分套餐打7折，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，前台电话：123889889</span
          >
        </div>
        <div class="active-record__content--item--btn">
          <span>查看详情</span>
          <!-- <img src="../../../assets/images/icon-arrow.png" alt="" /> -->
        </div>
      </div>
      <div class="active-record__content--item">
        <div class="gruop">
          <div class="active-record__content--item--title">
            <span>周年庆优惠活动</span>
          </div>
          <div class="active-record__content--item--time">
            <span>2021-09-08 15:34</span>
            <span>至</span>
            <span>2021-09-10 00:00</span>
          </div>
        </div>

        <div class="active-record__content--item--desc">
          <span
            >今天专场活动，部分套餐打7折，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，，详细请咨询店铺前台，详细请咨询店铺前台前台电话：123889889详细请咨询店铺前台前台电话：123889889详细请咨询店铺前台前台电话：123889889，详细请咨询店铺前台，详细请咨询店铺前台，详细请咨询店铺前台，，详细请咨询店铺前台，详细请咨询店铺前台前台电话：123889889详细请咨询店铺前台前台电话：123889889详细请咨询店铺前台前台电话：123889889</span
          >
        </div>
        <div class="active-record__content--item--btn">
          <span>查看详情</span>
          <!-- <img src="../../../assets/images/icon-arrow.png" alt="" /> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.active-record {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #dcc5c5;
  border-radius: 10px;
  padding: 10px;

  .active-record__title {
    border-bottom: 1px solid #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
    font-weight: 700;
    color: #666;
    span:nth-child(2) {
      display: block;
      height: 100%;
      cursor: pointer;
      .icon {
        text-align: center;
        vertical-align: middle;
      }
      &:hover {
        color: #000;
      }
    }
  }
  .active-record__content {
    overflow-y: scroll;
    overscroll-behavior: contain;
    .active-record__content--item {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      border-bottom: 1px solid #fff;
      .gruop {
        display: flex;
        .active-record__content--item--title {
          font-size: 20px;
          font-weight: 600;
          color: #666;
          margin-right: 10px;
        }
        .active-record__content--item--time {
          font-size: 15px;
          color: #666;
          span {
            margin: 5px;
            vertical-align: sub;
          }
        }
      }

      .active-record__content--item--desc {
        margin: 10px 0px;
        color: #4f4f4f;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 12px;
      }
      .active-record__content--item--btn {
        text-align: end;
        cursor: pointer;
      }
    }
  }
}
</style>
